<template>
  <el-tabs type="border-card">
    <el-tab-pane v-for="(item, i1 ) in infoData" :key="i1" :label="item.roomName">
      <div class="table">
        <ul class="table-title">
          <li>日期</li>
          <li>预约人</li>
          <li>时间</li>
          <li>状态</li>
          <li>操作</li>
        </ul>
        <ul class="table-info" v-if="item.tableData.length > 0" v-for="(t, i2) in item.tableData" :key="i2">
          <li>{{ t.date }}</li>
          <li>{{ t.name }}</li>
          <li>{{ t.time }}</li>
          <li>{{ t.status }}</li>
          <li v-if="t.status === '会议结束'">
            <el-button type="danger" @click="del(item.roomName, t.fullTime)">删除</el-button>
          </li>
          <li v-else></li>
        </ul>
        <ul class="table-info nodata" v-else>
          <el-empty :image-size="200" />
        </ul>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { GetMeetingHistory, DelHistory } from '../apis/projectApis/index';
import { onMounted, ref } from 'vue';
const infoData = ref([]);
const getHistory = async () => {
  let { data: { data } } = await GetMeetingHistory({ param: "会议室" });
  if (data.length > 0) {
    infoData.value = data
  };
};
const del = async (id, fullTime) => {
  let info = {
    twinID: id,
    fullTime
  }
  let res = await DelHistory(info);
  if (res.data.code == 200) {
    getHistory();
  }
}


onMounted(() => {
  getHistory();
});




</script>

<style lang="scss" scoped>
.table {
  width: 100%;

  .table-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px;

    li {
      width: 200px;
      color: rgb(137, 148, 162);
    }
  }

  .table-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
    color: rgb(137, 148, 162);

    &:hover {
      background-color: #fafafa;
    }

    li {
      width: 200px;
    }
  }

  .nodata {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>